<template>
    <div>
        <div class="box">

        <el-row class="margintop20" >

           <el-col class="margintop20 main">
             <el-form 
            :model="form" 
            :rules="rules"
            ref="form" 
            label-width="100px"
            label-position="right" 
            class="form">
              <el-form-item label="">
                 <span style="font-size:24px;margin-left:90px">修改留言</span>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category" class="demonstration">
                <el-cascader
                v-model="form.category"
                :options="options"
                @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="留言">
                <el-input type="textarea" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                 <el-button type="primary" @click="addtosome">发布留言</el-button>
            </el-form-item>
        </el-form>

        </el-col>
       
        </el-row>
        </div>
    </div>
</template>

<script>
import {advace} from "@/utils"
import {getadvisebyid,updateadvisebyid} from "@/api"
export default {
     data(){
        return {
            editorOption:{},
            options:advace,
            active:1,
            form:{},
            rules:{
                title:[
                    {required:true,message:"请输入标题",trigger:"blur"}
                ],
                category:[
                    {required:true,message:"请选择类型",trigger:"blur"}
                ]
            },
        }
    },
    mounted(){
        getadvisebyid({
            _id:this.$route.params.id
        }).then(res=>{
            console.log(res.result)
            res.result.category = res.result.category.split(",")
            this.form ={...res.result}
        })
    },
    methods:{
        onEditorChange(){

        },
        onEditorFocus(){

        },
        onEditorBlur(){

        },
        handleChange(){

        },
        gonext(){
            this.$refs.form.validate(valid=>{
                if(valid){
                    this.active++
                }else{
                    this.$message.error("请完善信息")
                    return false
                }
            })
            
        },
        next(){
             if(this.form.content){
                this.active++;
            }else{
                this.$message.error("请先完善意见")
            }
        },
         addtosome(){
             this.form.category = this.form.category.join(",")
            updateadvisebyid(this.form)
            .then(res=>{
                if(res.type){
                    this.$router.push({name:"adviselist"})
                }
            })
        
        }
    }
}
</script>

<style lang="scss" scoped >
.box{
      width: 70%;
    height: 80%;
}
.main{
    margin:50px 300px;
}
.ql-editor{
    height:250px;
}
::v-deep .el-textarea__inner{
    width: 300px !important;
    height: 120px;
    background: rgb(248, 242, 242);
}
::v-deep .el-input__inner{
    width: 300px !important;
      background: rgb(248, 242, 242);
}
</style>